<template>
  <div class="main">
    <h1 class="child1">个人信息</h1>
    <div class="child2">
      <div class="xinxi">
        <h3>姓名：{{ patient.real_name }}</h3>
        <h3>手机号：{{ patient.telephone }}</h3>
        <h3>身份证号：{{ patient.patient_id }}</h3>
      </div>
      <div class="tc">
        <el-button type="warning" @click="tuichu">退出当前用户</el-button>
      </div>
    </div>
    <h1 class="child3">就诊信息</h1>
    <div class="child4">
      <div class="jz" v-for="props in ghList" :key="props">
        <el-card shadow="always">
          <div class="aa">
            <el-image :src="props.img" class="image" />
          </div>
          <div class="xx">
            <h4>就诊日期：{{ props.day }}</h4>
            <h4>上午：{{ props.amwork }}||下午：{{ props.pmwork }}</h4>
            <h4>就诊科室：{{ props.departmentName }}</h4>
            <h4>就诊医生：{{ props.docName }}</h4>
            <h4>就诊类型：{{ props.feeName }} 价格：{{ props.money }}元</h4>
          </div>

          <div class="dz">
            <el-popconfirm title="确认要取消挂号吗?" @confirm="reset(props)">
              <template #reference>
                <el-button type="info">取消挂号</el-button>
              </template>
            </el-popconfirm>
            <el-button type="primary" plain @click="viewCases(props)">
              查看病例
            </el-button>
            <el-button type="primary" plain @click="reset123(props)">
              确认缴费
            </el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
  <div class="gr"></div>
  <!-- 查看病例 -->
  <el-dialog v-model="dialogVisible" title="查看病例" width="45%">
    <div><div v-html="PatientCases.info"></div></div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="logout()">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessage } from "element-plus";
import { get } from "../../utils/request";
export default {
  data() {
    return {
      loginState: sessionStorage.login,
      dialogVisible: false,
      patient: {
        patient_id: sessionStorage.patient_id,
        telephone: sessionStorage.telephone,
        real_name: sessionStorage.real_name,
      },
      PatientCases: {
        patientId: "",
        docId: "",
        info: "",
      },
      ghList: [], //挂号列表
    };
  },
  mounted() {
    this.getPersonage();
  },
  methods: {
    getPersonage() {
      get("/getPersonage", {
        patientId: this.patient.patient_id,
      }).then((res) => {
        this.ghList = res.data.data;
        console.log("+++++");
        console.log(res.data.data[0].docId);
        console.log("+++++");
        for (var i = 0; i < this.ghList.length; i++) {
          if (this.ghList[i].amwork == "0") this.ghList[i].amwork = "休息";
          if (this.ghList[i].pmwork == "0") this.ghList[i].pmwork = "休息";
        }
        console.log(this.ghList);
      });
    },
    tuichu() {
      sessionStorage.clear();
      console.log(sessionStorage);
      this.$router.push({
        name: "login",
      });
      ElMessage({
        message: "退出成功！",
        type: "success",
      });
    },
    reset(item) {
      get("/deletePatientDoctor", {
        id: item.id,
      }).then(() => {
        ElMessage({
          message: "取消成功！",
          type: "success",
        });
      });
      location.reload();
    },
    viewCases(props) {
      this.dialogVisible = true;
      this.PatientCases.docId = props.docId;
      this.PatientCases.patientId = props.patientId;
      console.log(this.PatientCases),
        get("/getInfo", this.PatientCases).then((res) => {
          this.PatientCases.info = res.data.data.info;
          console.log(this.PatientCases.info);
        });
      console.log("6666");
    },
    logout() {
      this.dialogVisible = !this.dialogVisible;
    },
  },
};
</script>

<style lang="scss" scoped>
html {
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
}
.child1 {
  background-color: #259b9e;
  height: 35px;
  width: 10%;

  text-align: center;
  color: white;
}
.child2 {
  position: relative;
  border: 1px solid rgb(228, 225, 225);
  height: 155px;
  width: 90%;
  color: rgb(129, 122, 122);
  margin-top: -15px;
}
.child3 {
  background-color: #259b9e;
  height: 35px;
  width: 10%;
  text-align: center;
  color: white;
}
.child4 {
  height: 155px;
  width: 90%;
  float: left;
  color: white;
  margin-top: -15px;
}

.main {
  margin-left: 10%;
  margin-top: 55px;
}
.title1 {
  float: left;
  size: 25px;
}
.xinxi {
  margin-left: 15%;
  float: left;
  margin-top: 2px;
}
.jz {
  position: relative;
  margin-top: 5px;
}
.aa {
  margin-left: 5%;
  margin-top: 15px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
}
.aa img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  height: 100%;
}
.xx {
  margin-left: 10%;
  width: 50%;
  float: left;
}
.tc {
  position: absolute;
  left: 85%;
  bottom: 15%;
}
.dz {
  position: absolute;
  left: 75%;
  bottom: 10%;
}
</style>
